<template>
  <div class="platform-function">
    <p class="headline">平台功能介绍</p>
    <p class="description">多年服务进出口业务经验</p>
    <div class="accordion">
      <ul class="accordion-center">
        <li
          v-for="(item, index) in accordionList" 
          :key="index"
          :style="{backgroundImage: `url(${item.notActive.img})`}"
        >
          <div class="not-active-mask">
            <p class="title">{{item.notActive.title}}</p>
            <p>{{item.notActive.text1}}</p>
            <p>{{item.notActive.text2}}</p>
            <p>{{item.notActive.text3}}</p>
          </div>
          <div class="active-mask"
            :style="{backgroundImage: `url(${item.active.img})`}"
          >
            <p class="title">{{item.active.title}}</p>
            <p>{{item.active.text1}}</p>
            <p>{{item.active.text2}}</p>
            <p>{{item.active.text3}}</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import notActive1 from './../img/notActive1.png'
import notActive2 from './../img/notActive2.png'
import notActive3 from './../img/notActive3.png'
import notActive4 from './../img/notActive4.png'
import notActive5 from './../img/notActive5.png'
import active1 from './../img/active1.png'
import active2 from './../img/active2.png'
import active3 from './../img/active3.png'
import active4 from './../img/active4.png'
import active5 from './../img/active5.png'
export default {
  name: 'Platform',
  data () {
    return {
      accordionList: [{
        title: 'eee',
        notActive: {img: notActive1, title: '精准匹配', text1: '清关服务', text2: '整改报告', text3: '陪同翻译'},
        active: {img: active1, title: '精准匹配', text1: '11111111', text2: '22222222', text3: '3333333'}
      }, {
        notActive: {img: notActive2, title: '精准匹配', text1: '清关服务', text2: '整改报告', text3: '陪同翻译'},
        active: {img: active2, title: '精准匹配', text1: '清关服务', text2: '厂商备案不超过20个字的简介', text3: '税号确认展开的的简介'},
      }, {
        notActive: {img: notActive3, title: '在线下单', text1: 'IP保护', text2: '包装设计', text3: '翻译原标'},
        active: {img: active3, title: '在线下单', text1: '1111111', text2: '2222222', text3: '3333333'},
      }, {
        notActive: {img: notActive4, title: '入驻店铺', text1: 'IP保护', text2: '整改报告', text3: '翻译原标'},
        active: {img: active4, title: '入驻店铺', text1: '213123123123', text2: '213123123123', text3: '213123123123'},
      }, {
        notActive: {img: notActive5, title: '一站式服务', text1: 'IP保护', text2: '整改报告', text3: '翻译原标'},
        active: {img: active5, title: '一站式服务', text1: '213412312313', text2: '213123123123', text3: '213123123123'},
      }],
    }
  },
  methods: {
    add () {
      this.$dialog({title: 'title1', message: 'Message1', buttonText: 'OK1'})
    }

  },
}
</script>

<style lang="scss" scoped>
.platform-function {
  box-sizing: border-box;
  padding-top: 1rem;
  .headline {
    text-align: center;
    font-size: .64rem;
    line-height: 1em;
  }
  .description {
    text-align: center;
    margin-top: .32rem;
    color: #666;
    line-height: 1em;
  }
  .accordion {
    display: flex;
    .accordion-center {
      margin: .88rem auto;
      width: 24rem;
      height: 9rem;
      display: flex;
      li {
        width: calc(100% / 5);
        transition: all .4s;
        overflow: hidden;
        background : {
          repeat: no-repeat;
          position-x: center;
        }
        position: relative;
        &:hover {
          width: 34%;
          .not-active-mask {
            p {
              opacity: 0;
            }
          }
          .active-mask {
            opacity: 1;
          }
        }
        .not-active-mask {
          z-index: 1;
          box-sizing: border-box;
          padding-top: 1.6rem;
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, .5);
          color: #fff;
          p {
            color: #fff;
            text-indent: .7rem;
            margin-bottom: .6rem;
            color: #fcfcfc;
            transition: all .5s;
          }
          .title {
            font-size: .5rem;
            margin-bottom: 1.5rem;

          }
        }
        .active-mask {
          background-color: rgba(251, 251, 31, .8);
          opacity: 0;
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          z-index: 2;
          box-sizing: border-box;
          padding-top: 1.6rem;
          transition: all .5s;
          background: {
            position-x: center;
            position-y: bottom;
            repeat: no-repeat;
          };
          p {
            color: #fff;
            text-indent: .7rem;
            margin-bottom: .6rem;
            color: #fcfcfc;
          }
          .title {
            font-size: .5rem;
            margin-bottom: 1.5rem;
          }
        }
      }
    }
  }
}
</style>
